<template>
  <van-swipe
    :autoplay="5000"
    :duration="2000"
    class="com-banner-container">
    <van-swipe-item
      v-for="(item,index) in bannerData"
      :key="index">
      <router-link :to="item.link">
        <img :src="item.img" alt="image-1">
      </router-link>
    </van-swipe-item>
  </van-swipe>
  
</template>

<script>
export default {
  props: {
    bannerData: {
      type: Array,
      default: () => [
        {
          id: 1,
          link: '/home',
          img: require('../assets/images/banner/banner-1.png'),
          title: '1'
        },
        {
          id: 2,
          link: '/home',
          img: require('../assets/images/banner/banner-1.png'),
          title: '2'
        },
        {
          id: 3,
          link: '/home',
          img: require('../assets/images/banner/banner-1.png'),
          title: '3'
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/style/global.scss";

.com-banner-container {
  width: 100%;
  border-radius: 16px !important;
  box-sizing: border-box;
  .van-swipe-item {
    width: 100%;
    margin: 0 auto;
    height: 240px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    a img {
      border-radius: 16px !important;
    }
  }
  /deep/.van-swipe__indicators {
    .van-swipe__indicator {
      width: 8px !important;
      height: 8px !important;
      opacity: 1 !important;
    }
    .van-swipe__indicator--active {
      width: 20px !important;
      padding-left: 8px !important;
      border-radius: 0 !important;
      background: $colorHeadBg !important;
      border-radius: 12PX !important;
    }
  }
}
.banner-container::after {
  content: '';
  display: block;
  width: 94%;
  height: 2PX;
  background: rgba(119, 118, 118, 1);
  position: absolute;
  left: 3%;
  bottom: 4PX;
  filter: blur(2PX);
  filter:alpha(opacity=40);
}
</style>
